<template>
    <div>
       <div class="title">11 结果预览</div>
         <div class="list">
            <div class="list-title">功能</div>
            <div class="list-item-wrapper" v-for="(item, index) of list2" :key="index">
                <div  @click="handleDivClick(item.link, index)" class="list-item"
                 >
                 <!-- :class="{actived : index === curindex }" -->
                    {{item.content}} 
                    <!-- {{index}} -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Commontitle',
  data () {
    return {
      curindex: '',
      list2:
      [{
        link: '',
        content: '查看投票'
      }, {
        link: 'add',
        content: '新增投票'
      }, {
        link: 'notice',
        content: '候选人信息'
      }, {
        link: 'admin',
        content: '用户管理'
      }]
    }
  },
  methods: {
    handleDivClick (link, content) {
      this.curindex = content
      // console.log(this.curindex)
      this.$router.push('/home/' + link)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.title
    width: 100%
    line-height: 1.5rem
    text-align: center
    font-weight: 700
    font-size: .36rem
.list
    padding: 0 .5rem
    overflow: hidden
    .list-title
        text-align: center
        background: $bgcolor
        line-height:.6rem
        color: white
    .list-item-wrapper
        width: 25%
        float: left
    .list-item
        // color: #555
        line-height: .4rem
        font-size: .34rem
        border: .02rem solid #666
        padding: .1rem .1rem
        border-radius: .1rem
        margin: .2rem .4rem
        text-align: center
  &.actived
    background: #57bdbf
    color: #fff
</style>
